<template>
  <!-- <div> -->
    <LowCode />
    <!-- <WidgetEditor
      v-if="isWidgetEditorShow"
      :dataSourceInfo="dataSourceInfo"
      :componentData="componentData"
      @cancel="handleCancel"
      @save="handleSave" /> -->
  <!-- </div> -->

</template>

<script>
import LowCode from "./LowCode"
// import WidgetEditor from "./WidgetEditor"
import EventBus from "./LowCode/EventBus"
import { upDashboard, addDashboard, getDashboardById } from "@/api/multidimensionalAnalysis"
import { getComponentListByTypes, addSnapshot,deepCopy } from "./LowCode/lib/utils"
import { analysisComponentTypes } from "./LowCode/lib/const"
import { save } from "./LowCode/lib/save"
import { getChartAxisData, updateAnalysisComponent } from "./LowCode/lib/analysisData"

export default {
  props: {

  },
  data() {
    return {
      id: "",
      data: {},
      dataSourceInfo: null,
      componentData: null,
      isWidgetEditorShow: false
    }
  },
  created(){
    this.$store.commit("lowCode/resetSnapshot")
    const {
      id
    } = this.$route.query
    this.id = id
    this.getData()
    this.initEvent()
  },
  methods: {
    initEvent(){
      // 保存
      EventBus.$once("save", ()=> {
        const {
          itemList,
          pageOperation
        } = save()
        upDashboard({
          ...this.data,
          itemList,
          pageOperation
        }, 2)// type: 1修改除itemList和pageOperation的所有内容.2修改itemList和pageOperation
        .then(data => {
          if(data.errorCode === 0){
            this.$message.success("保存成功")
          }
          else {

          }
        })
        .catch(err => {
          this.$message.error(err.response.data.message)
        })
        // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
      })

      // 预览
      EventBus.$once("preview", ()=> {
        this.$router.push({ path: "/board/boardPreview", query: {id: this.id, type: "preview"} })
      })

      // 另存为
      EventBus.$once("saveAsSave", (form)=> {
        const {
          itemList,
          pageOperation
        } = save()
        addDashboard({
          ...this.data,
          ...form,
          id: undefined,
          itemList,
          pageOperation
        }, 2)// type: 1修改除itemList和pageOperation的所有内容.2修改itemList和pageOperation
        .then(data => {
          if(data.errorCode === 0){
            this.$message.success("另存为成功")
          }
          else {

          }
        })
        // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
      })

      // 编辑业务组件
      EventBus.$once("showAnalysisEditor", () => {
        const {
          selectedComponent
        } = this.$store.state.lowCode
        const chartAxisData = getChartAxisData(selectedComponent.props.value)
        const { databaseName, datasourceId, gradeThematicId, tableName, tableCode } = chartAxisData.dataSource
        this.dataSourceInfo = {
          databaseName,
          datasourceId,
          gradeThematicId,
          tableCode,
          tableName
        }
        this.componentData = {
          ...selectedComponent.props.value
        }
        this.isWidgetEditorShow = true
      })

    },
    getData(){
      getDashboardById({id: this.id})
      .then(data => {
        if(data.errorCode === 0){
          console.log(data.data)
          this.data = data.data
          const {
            componentList,
            pageSetting
          } = JSON.parse(this.data.pageOperation || "{\"componentList\":[],\"pageSetting\":{globalTitleStyle:{}}}")
          // this.$store.commit('lowCode/setCanvasComponentList', componentList)
          this.$store.commit("lowCode/setPageSetting", pageSetting)
          const saveData = {
            pageSetting,
            canvasComponentList: componentList,
          }
          // addSnapshot('all', deepCopy(saveData))
          EventBus.$emit("init", saveData)
        }
        else {
          this.$message.error(data.message)
          this.$store.commit("lowCode/setCanvasComponentList", [])
          this.$store.commit("lowCode/setPageSetting", {globalTitleStyle: {}})
        }


      })
    },
    handleSave(val) {
      console.log(val)
      const {
        selectedComponent,
        canvasComponentList
      } = this.$store.state.lowCode
      const styleConfig = {
        globeStyle: val.styleConfig.globeStyle ? JSON.parse(val.styleConfig.globeStyle) : "",
        seriesStyle: val.styleConfig.seriesStyle ? JSON.parse(val.styleConfig.seriesStyle) : "",
      }
      selectedComponent.props.value.chartTypeId = String(val.chartType)
      selectedComponent.props.value.dasChartTypeId = val.chartType
      selectedComponent.props.value.chartStyle = JSON.stringify(styleConfig)
      selectedComponent.props.value.chartAxisData = val.tableSettings

    },
    handleCancel() {
      this.isWidgetEditorShow = false
      this.dataSourceInfo = null
      this.analysisData = null
      const {
        selectedComponent,
        canvasComponentList
      } = this.$store.state.lowCode
      updateAnalysisComponent(selectedComponent.key, canvasComponentList)
      // const {
      //   selectedComponent,
      //   canvasComponentList
      // } = this.$store.state.lowCode
      // Api.queryModuleDetail({mId: selectedComponent.props.value.id})
      // .then((res)=> {
      //   selectedComponent.props.value = res.data
      //   updateAnalysisComponent(selectedComponent.key, canvasComponentList)
      // })

    }
  },
  watch: {
    // $route(to, from) {
    //   console.log(to.path === from.path && to.query.id !== from.query.id)
    //   this.id = to.query.id
    //   if(to.path === from.path && to.query.id !== from.query.id){
    //     this.getData()
    //   }
    // },
  },
  components: {
    LowCode,
    // WidgetEditor
  }
}
</script>

<style lang="less" scoped>

</style>
